<template>
  <!-- 已审提款订单 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="orderDataList" @query="getWithdrawalOrderList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="渠道:" label-width="50px">
            <el-select v-model="listQuery.agent_id" placeholder="请选择渠道" filterable >
              <el-option label="全部" value="" ></el-option>
              <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="marginR20">
            <el-select v-model="listQuery.search_type" filterable placeholder="请选择类型">
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in conditionData" :key="index"></el-option>
            </el-select>
            <el-input class="width200" type="text" v-model="listQuery.search_value" clearable placeholder="请输入数值"  />
          </el-form-item>
          <el-form-item>
            <el-select v-model="listQuery.time" filterable placeholder="请选择时间类型">
              <el-option label="创建时间" value="start_time"></el-option>
              <el-option label="订单完成时间" value="end_time"></el-option>
            </el-select>
            <el-date-picker is-range v-model="listQuery.dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" 
            end-placeholder="结束日期" class="full-width-input time-box" :default-time="['00:00:00', '23:59:59']" :clearable="false"></el-date-picker>
          </el-form-item>
          <el-form-item label="订单状态:" label-width="90px" class="marginR20">
            <el-select v-model="listQuery.order_status" clearable filterable placeholder="请选择订单状态">
              <el-option label="全部" value="2,3,4"></el-option>
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in orderStatusData" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <div class="statistic flexDetween" style="height:36px;">
            <div class="flex">
              <!-- <el-button :disabled="!checkedItem" v-permission="'gift.edit'" size="mini" type="primary" @click.stop="isShowDetails = true">订单详情</el-button> -->
              <el-button type="info" size="mini" icon="el-icon-refresh" @click="getWithdrawalOrderList">刷新</el-button> 
              <el-button class="marginL20 marginR20" type="success" size="mini" icon="el-icon-wallet" @click="isShowTotalsDetails=!isShowTotalsDetails,getTotalOrderList()">统计</el-button>
              <div class="flex" v-show="isShowTotalsDetails">
                <p> 成功提款总额：<span class="colorGre">{{ totalForm.success_money }}</span></p>
                <p> 成功提款笔数：<span class="colorGre">{{ totalForm.success_count }}</span></p>
                <p> 退回总额：<span class="colorYe">{{ totalForm.return_money }}</span></p>
                <p> 退回笔数：<span class="colorYe">{{ totalForm.return_count }}</span></p>
                <!-- <p> 待处理总额：<span class="colorGre">{{ totalForm.pending_money }}</span></p> -->
                <!-- <p> 待处理数量：<span class="colorGre">{{ totalForm.pending_count }}</span></p> -->
                <p> 罚没总额：<span class="colorRed">{{ totalForm.forfeiture_money }}</span></p>
                <p> 罚没笔数：<span class="colorRed">{{ totalForm.forfeiture_count }}</span></p>
              </div>
            </div>
            <el-button type="primary" size="mini" icon="el-icon-download" :disabled="!orderDataList.length" @click="getExport">导出</el-button> 
          </div>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{ '' }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="agent_id" label="渠道名" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-show="scope.row.agent_id">【{{scope.row.agent_id}}】{{ $public.channelLabel(scope.row.agent_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="order_alert_status" label="警戒状况" align="center" width="90">
            <template slot-scope="scope">
              <el-button class="order_state" size="mini" :type="orderState(scope.row.order_alert_status)" circle>{{''}}</el-button> 
            </template>
          </el-table-column>
          <el-table-column prop="order_num" label="订单号" align="center" width="240">
            <template slot-scope="scope">
              <span class="item_details" @click.stop="handleCurrentChange(scope.row),isShowDetails = true">{{ scope.row.order_num }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="third_order_num" label="第三方订单号" align="center" width="220" />
          <el-table-column prop="order_status" label="订单状态" align="center" width="100">
            <template slot-scope="scope">
              <el-tag :type="orderType(scope.row.order_status)" >{{ orderStatus(scope.row.order_status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="channel_id" label="提现渠道" align="center" width="150">
            <template slot-scope="scope">
              <span>{{ withdrawLabel(scope.row.channel_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="user_id" label="用户ID" align="center" width="120">
            <template slot-scope="scope">
              <span class="item_details" @click="isShowUserDetails = true,checkedItem = scope.row">{{ scope.row.user_id }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="is_kol" label="是否是KOL" align="center" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.is_kol?'success':'info'" >{{ scope.row.is_kol?'KOL':'否' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="account_type" label="账户类型" align="center" width="120">
            <template slot-scope="scope">
              <el-tag :type="accountTag(scope.row.account_type)">{{ accountType(scope.row.account_type)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="recharge_reward" label="充值筹码" align="center" width="150" />
          <el-table-column prop="send_reward" label="赠送筹码" align="center" width="150" />
          <el-table-column prop="cash_money" label="提款金额" align="center" width="150" />
          <el-table-column prop="cash_sure_money" label="实际提款金额" align="center" width="150" />
          <el-table-column prop="created_at" label="创建时间" align="center" width="180" />
          <el-table-column prop="updated_at" label="修改时间" align="center" width="180" />
          <el-table-column prop="user_total_recharge" label="总充值" align="center" width="150" />
          <el-table-column prop="user_total_cash" label="总提款" align="center" width="150" />
          <el-table-column prop="user_total_water" label="总有效流水" align="center" width="150" />
          <el-table-column prop="user_total_game_income" label="总输赢" align="center" width="150" />
          <el-table-column prop="user_created_at" label="用户注册时间" align="center" width="180" />
          <el-table-column prop="admin_id" label="操作员" align="center" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ $public.accountLabel(scope.row.admin_id) }}<span v-show="scope.row.admin_id">【{{scope.row.admin_id}}】</span></span>
            </template>
          </el-table-column>
          <el-table-column prop="reason" label="操作理由" align="center" width="200" show-overflow-tooltip/>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getWithdrawalOrderList" />
        </template>
      </search-table>
      <page-details :show="isShowDetails" :data="checkedItem" @onHideDetails="onHideDetails" />
      <user-details :show="isShowUserDetails" :data="checkedItem" @onHideDetails="onHideDetails" />
    </div>
  </div>
</template>

<script>
import { throttle } from '@/utils/index'
import {
  getWithdrawalOrder,
  orderSummation,
  withdrawalOrderChannels,
  exportWithdrawOrder
} from '@/api/order'
import { 
  ORDER_STATUS,
  ORDER_STATE,
  ACCOUNT_TYPE,
 } from '@/utils/enum'
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'
import UserDetails from '@/views/userManage/user/page-details.vue'
export default {
  name: 'hauled',
  components: {
    PageDetails,
    SearchTable,
    UserDetails
  },
  data () {
    return {
      ORDER_STATUS,
      ORDER_STATE,
      ACCOUNT_TYPE,
      channelData: this.$store.state.commonState.channelDataArray,
      conditionData:[{
        label:'用户ID',
        value:1
      },{
        label:'订单号',
        value:2
      },{
        label:'第三方订单号',
        value:3
      },{
        label:'≥大于等于的金额',
        value:4
      },{
        label:'≤小于等于的金额',
        value:5
      }],
      orderStatusData:[{
        label:'代付中',
        value:1
      },{
        label:'订单完成',
        value:2
      },{
        label:'罚没',
        value:3
      },{
        label:'退回',
        value:4
      }],
      totalForm:{
        forfeiture_count: '', //罚没订单数量
        forfeiture_money: '', //罚没订单金额
        pending_count: '', //待处理订单数量
        pending_money: '', //待处理订单金额
        return_count: '', //退回的订单数量
        return_money: '', //退回的订单金额
        success_count: '', //提现成功的订单数量
        success_money: '' //提现成功的订单金额
      },
      isShowDetails: false,
      isShowUserDetails: false,
      isShowTotalsDetails: false,
      reason:'',
      checkedItem: null,
      listLoading: true,
      orderDataList: [],
      listQuery: {
        page: 1,
        size: 50,
        search_type: 1,
        search_value:'',
        order_status: '2,3,4',
        withdraw_type: -1,
        agent_id:'',
        time: 'end_time',
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
        update_time_start: '',
        update_time_end: '',
      },
      currentTotal: 0,
      pathDataList: [],
      withdrawChannelData:[]
    }
  },
  created () {
    // this.getWithdrawalChannelList()
  },
  activated(){
    this.channelData=this.$store.state.commonState.channelDataArray
    this.getWithdrawalChannelList()
  },
  methods: {
    // 已提审订单列表
    async getWithdrawalOrderList (query) {
      let that = this,params=JSON.parse(JSON.stringify(that.listQuery));
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.orderDataList = [];
      that.checkedItem = null;
      if (params.dateTime && params.dateTime[0] && params.dateTime[1]) {
        // 开始时间
        if(params.time=='start_time'){
          params.start_time = that.$public.standardDate(params.dateTime[0])
          params.end_time = that.$public.standardDate(params.dateTime[1])
          params.update_time_start = ''
          params.update_time_end = ''
        }else{
          params.update_time_start = that.$public.standardDate(params.dateTime[0])
          params.update_time_end = that.$public.standardDate(params.dateTime[1])
          params.start_time = ''
          params.end_time = ''
        }
      }
      if(params.search_type==4 || params.search_type==5){
        params.search_value=that.$public.mathNumberMultiply(params.search_value,10000)
      }
      const response = await getWithdrawalOrder(params)
      if (response.code == 1) {
        if(response.data.list){
          response.data.list.forEach(item => {
            item.isChecked = false
            item.recharge_reward=that.$public.mathNumberDivideWan(item.recharge_reward)
            item.send_reward=that.$public.mathNumberDivideWan(item.send_reward)
            item.cash_money=that.$public.mathNumberDivideWan(item.cash_money)
            item.cash_sure_money=that.$public.mathNumberDivideWan(item.cash_sure_money)
            item.user_total_recharge=that.$public.mathNumberDivideWan(item.user_total_recharge)
            item.user_total_cash=that.$public.mathNumberDivideWan(item.user_total_cash)
            item.user_total_water=that.$public.mathNumberDivideWan(item.user_total_water)
            item.user_total_game_income=that.$public.mathNumberDivideWan(item.user_total_game_income)
          })
          that.orderDataList = response.data.list
          that.currentTotal = response.data.total
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 订单合计
    getTotalOrderList () {
      let that = this;
      if(!that.isShowTotalsDetails) return
      orderSummation(that.listQuery).then(res => {
        if (res.code == 1) {
          res.data.forfeiture_money=that.$public.mathNumberDivideWan(res.data.forfeiture_money)
          res.data.pending_money=that.$public.mathNumberDivideWan(res.data.pending_money)
          res.data.return_money=that.$public.mathNumberDivideWan(res.data.return_money)
          res.data.success_money=that.$public.mathNumberDivideWan(res.data.success_money)
          that.totalForm=res.data
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 提现订单渠道
    getWithdrawalChannelList () {
      let that = this;
      withdrawalOrderChannels().then(res => {
        if (res.code == 1) {
          res.data.map(item => {
            item.success_rate = item.success_rate/100
          })
          that.withdrawChannelData=res.data
          that.getWithdrawalOrderList();
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 导出
    getExport(){
      let that = this,serveUrl=process.env.VUE_APP_BASE_API.substring(0,process.env.VUE_APP_BASE_API.length-6);
      exportWithdrawOrder(that.listQuery).then(res => {
        if (res.code == 1) {
          window.open(serveUrl+res.data)
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 订单展示
    orderStatus(cellValue){
      return (this.ORDER_STATUS.find((item) => item.value === cellValue)?.label || "-");
    },
    // 订单状态
    orderType(cellValue){
      return (this.ORDER_STATUS.find((item) => item.value === cellValue)?.type || "-");
    },
    // 订单警戒状态
    orderState(cellValue){
      return (this.ORDER_STATE.find((item) => item.value === cellValue)?.label || "-");
    },
    // 提现渠道
    withdrawLabel(cellValue){
      return (this.withdrawChannelData.find((item) => item.pay_way_id === cellValue)?.name || "-");
    },
    // 账号类型展示
    accountType(cellValue){
      return (this.ACCOUNT_TYPE.find((item) => item.value === cellValue)?.label || "测试账号");
    },
    // 账号类型展示
    accountTag(cellValue){
      return (this.ACCOUNT_TYPE.find((item) => item.value === cellValue)?.type || "-");
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val
      this.orderDataList.map(item => {
        if (item.id === val.id) {
          item.isChecked = true
        } else {
          item.isChecked = false
        }
      })
    },
    // 刷新
    refresh:throttle(function () {
      let that = this;
      that.listQuery = {
        page: 1,
        size: 50,
        search_type: 1,
        search_value:'',
        order_status: '2,3,4',
        agent_id:'',
        time: 'end_time',
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
        update_time_start: '',
        update_time_end: '',
      }
      that.totalForm={
        forfeiture_count: '', //罚没订单数量
        forfeiture_money: '', //罚没订单金额
        pending_count: '', //待处理订单数量
        pending_money: '', //待处理订单金额
        return_count: '', //退回的订单数量
        return_money: '', //退回的订单金额
        success_count: '', //提现成功的订单数量
        success_money: '' //提现成功的订单金额
      }
      that.getWithdrawalOrderList();
    }, 2000),
    onHideDetails (show) {
      this.isShowDetails = false
      this.isShowUserDetails = false
      if(show){
        this.getWithdrawalOrderList()
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.order_state {
  width: 27px;
  height: 27px;
}
</style>
